let mask = document.querySelector(".mask"),
    big = document.querySelector(".big"),
    bigImg = big.querySelector(".img")
    box = document.querySelector(".box");

box.addEventListener("mouseenter",()=>{
    mask.style.display="block";
    big.style.display="block";
    document.addEventListener("mousemove",e=>{
        let boxW = box.offsetWidth,
            boxH = box.offsetHeight,
            maskW = mask.offsetWidth,
            maskH = mask.offsetHeight,
    
            // 移动距离
            X = e.clientX - maskW/2-box.offsetLeft,
            Y = e.clientY - maskH/2-box.offsetTop;
    
        // 边界判断
        (X<=0)&&(X=0);
        (X>=boxW-maskW)&&(X=boxW-maskW);
        (Y<=0)&&(Y=0);
        (Y>=boxH-maskH)&&(Y=boxH-maskH)
    
        let m = (bigImg.offsetWidth-big.offsetWidth)/(boxW-maskW),
            n = (bigImg.offsetHeight-big.offsetHeight)/(boxH-maskH);
        mask.style.transform = `translate(${X}px,${Y}px)`;
        bigImg.style.transform = `translate(${-X*m}px,${-Y*n}px)`
    });
});

box.addEventListener("mouseleave",()=>{
    mask.style.display="none";
    big.style.display="none";
});